<template>
  <div>
    <el-card class="el-card" shadow="hover" :body-style="{ padding: '0px' }">
      <!-- 添加品牌类别弹出框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span class="inputName">(类型名称)</span>
        <el-form
          :model="ruleForm"
          :hide-required-asterisk="true"
          :status-icon="true"
          :rules="rules"
          ref="ruleForm"
        >
          <span class="name"> 数码名称</span>
          <el-select v-model="value" placeholder="请选择" class="el-sel">
            <el-option
              v-for="item in options"
              :key="item.digital_category_id"
              :value="item.digital_category_name"
              class="el-option"
            >
            </el-option>
          </el-select>
          <br />
          <span class="name"> 品牌名称</span>
          <el-select v-model="valueTwo" placeholder="请选择" class="el-sel">
            <el-option
              v-for="item in optionsTwo"
              :key="item.digital_brand_id"
              :value="item.digital_brand_name"
              class="el-option"
            >
            </el-option>
          </el-select>
          <el-form-item
            label="数码产品名"
            prop="addName"
            :label-width="formLabelWidth"
          >
            <el-input class="inp1" v-model="ruleForm.addName"></el-input>
          </el-form-item>
          <el-form-item
            label="产品介绍"
            prop="addRepresentation"
            :label-width="formLabelWidth"
          >
            <el-input
              class="inp1"
              v-model="ruleForm.addRepresentation"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="添加者ID"
            prop="addAdministratorsId"
            :label-width="formLabelWidth"
          >
            <el-input
              class="inp1"
              v-model="ruleForm.addAdministratorsId"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="addDigitalType()" size="mini"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 编辑弹出框 -->
      <el-dialog
        title="提示"
        :visible.sync="changeDialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span class="inputName">(类型名称)</span>
        <el-form
          :model="ruleForm"
          :hide-required-asterisk="true"
          :status-icon="true"
          :rules="rules"
          ref="ruleForm"
        >
          <span class="name"> 数码名称</span>
          <el-select v-model="changeValue" placeholder="请选择" class="el-sel2">
            <el-option
              v-for="item in changeOptions"
              :key="item.digital_category_id"
              :value="item.digital_category_name"
            >
            </el-option> </el-select
          ><br />
          <span class="name"> 品牌名称</span>
          <el-select
            v-model="changeValueTwo"
            placeholder="请选择"
            class="el-sel2"
          >
            <el-option
              v-for="item in changeOptionsTwo"
              :key="item.digital_brand_id"
              :value="item.digital_brand_name"
            >
            </el-option>
          </el-select>
          <el-form-item
            label="数码产品"
            prop="changeId"
            :label-width="formLabelWidth"
          >
            <el-input class="inp1" v-model="ruleForm.changeId"></el-input>
          </el-form-item>
          <el-form-item
            label="数码产品名"
            prop="changeName"
            :label-width="formLabelWidth"
          >
            <el-input class="inp1" v-model="ruleForm.changeName"></el-input>
          </el-form-item>
          <el-form-item
            label="产品介绍"
            prop="changeRepresentation"
            :label-width="formLabelWidth"
          >
            <el-input
              class="inp1"
              v-model="ruleForm.changeRepresentation"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeDialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="updateName()" size="mini"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 删除弹出框 -->
      <el-dialog
        title="提示"
        :visible.sync="delDialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :hide-required-asterisk="true"
          :status-icon="true"
          :rules="rules"
          ref="ruleForm"
        >
          <p>确定删除此品牌？</p>
          <el-form-item label="数码产品ID" :label-width="formLabelWidth">
            <el-input
              class="inp1"
              v-model="ruleForm.delId"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="数码产品名" :label-width="formLabelWidth">
            <el-input
              class="inp1"
              v-model="ruleForm.delName"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="介绍" :label-width="formLabelWidth">
            <el-input
              class="inp1"
              v-model="ruleForm.delRepresentation"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delName()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 搜索 -->
      <el-input
        class="el-input"
        placeholder="请输入要查询的用户"
        prefix-icon="el-icon-search"
        v-model="msg"
        clearable
      ></el-input>
      <!-- 添加 -->
      <el-button type="primary" class="bnt1" @click="addType()"
        >添加数码类别</el-button
      >
      <!-- 表格 -->
      <el-table :data="search" style="width: 100%" border>
        <!-- 表头 -->
        <el-table-column
          prop="administrators_id"
          label="管理员ID"
          width="80"
         header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_brand_name"
          label="品牌名"
         header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_category_name"
          label="分类"
         header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_date"
          label="添加时间"
          width="110"
         header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_discuss"
          label="讨论量"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_heat"
          label="热度"
         header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_id"
          label="数码产品ID"
          width="100"
         header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_name"
          label="数码产品名"
        header-align="center"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="digital_score"
          label="评分"
      header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="digital_representation"
          label="产品介绍"
          align="center"
          header-align="center"
        ></el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="149" header-align="center"
          align="center">
          <template slot-scope="scope">
             <el-button type="success" plain size="mini"  @click="changeDigitalCategory(scope.$index, scope.row)" >修改</el-button>
             <el-button type="danger" plain size="mini" @click="delDigitalCategory(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios';
import util from '../lib/index.js';
export default {
  data() {
    var validateAddName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数码产品名'));
      } else {
        callback();
      }
    };
    var validateAddRepresentation = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入产品介绍'));
      } else {
        callback();
      }
    };
    var validateAddAdministratorsId = (rule, value, callback) => {
      var res = /^[0-9]*$/;
      if (value === '') {
        callback(new Error('请输入添加者ID'));
      } else if (!res.test(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };

    var valiDatedigitalId = (rule, value, callback) => {
      var res = /^[0-9]*$/;
      if (value === '') {
        callback(new Error('请输入添加者ID'));
      } else if (!res.test(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };
    var validateChangeName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数码产品名'));
      } else {
        callback();
      }
    };
    var validateChangeRepresentation = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入产品介绍'));
      } else {
        callback();
      }
    };
    var valiDateChangeId = (rule, value, callback) => {
      var res = /^[0-9]*$/;
      if (value === '') {
        callback(new Error('请输入数码产品ID'));
      } else if (!res.test(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };
    return {
      options: [],
      optionsTwo: [],
      changeOptions: [],
      changeOptionsTwo: [],
      valueTwo: '',
      value: '',
      changeValueTwo: '',
      changeValue: '',
      changeId: '',
      changeIdTwo: '',

      id: '',
      idTwo: '',
      list: [],
      msg: '',
      dialogVisible: false,
      changeDialogVisible: false,
      delDialogVisible: false,
      text: '',
      formLabelWidth: '120px',
      ruleForm: {
        addName: '',
        addRepresentation: '',
        addAdministratorsId: '',
        digitalId: '',
        changeName: '',
        changeRepresentation: '',
        changeId: '',
        delId: '',
        delName: '',
        delRepresentation: '',
      },
      rules: {
        addName: [{ validator: validateAddName, trigger: 'blur' }],
        addRepresentation: [
          { validator: validateAddRepresentation, trigger: 'blur' },
        ],
        addAdministratorsId: [
          { validator: validateAddAdministratorsId, trigger: 'blur' },
        ],
        digitalId: [{ validator: valiDatedigitalId, trigger: 'blur' }],
        changeName: [{ validator: validateChangeName, trigger: 'blur' }],
        changeRepresentation: [
          { validator: validateChangeRepresentation, trigger: 'blur' },
        ],
        changeId: [{ validator: valiDateChangeId, trigger: 'blur' }],
      },
    };
  },
  mounted() {
    util.allInfor({
      pages:1
    }).then((r) => {
      this.list = r.data.data;
      // console.log('r',this.list);
    });
  },
  computed: {
    //搜索
    search() {
      let arr = [];
      for (let i = 0; i < this.list.length; i++) {
        if (
          (this.list[i].administrators_id + '').indexOf(this.msg) !== -1 ||
          // this.list[i].digital_brand_id.indexOf(this.msg) !== -1 ||
         ( this.list[i].digital_category_id+'').indexOf(this.msg) !== -1 ||
          this.list[i].digital_date.indexOf(this.msg) !== -1 ||
         ( this.list[i].digital_discuss+'').indexOf(this.msg) !== -1 ||
          (this.list[i].digital_heat+'').indexOf(this.msg) !== -1 ||
          (this.list[i].digital_id+'').indexOf(this.msg) !== -1 ||
          this.list[i].digital_name.indexOf(this.msg) !== -1 ||
          this.list[i].digital_date.indexOf(this.msg) !== -1 ||
          this.list[i].digital_representation.indexOf(this.msg) !== -1 ||
          (this.list[i].digital_score+'7').indexOf(this.msg) !== -1
        ) {
          arr.push({
            administrators_id: this.list[i].administrators_id,
            digital_brand_id: this.list[i].digital_brand_id,
            digital_category_id: this.list[i].digital_category_id,
            digital_date: this.list[i].digital_date,

            digital_discuss: this.list[i].digital_discuss,
            digital_heat: this.list[i].digital_heat,
            digital_id: this.list[i].digital_id,
            digital_name: this.list[i].digital_name,
            digital_representation: this.list[i].digital_representation,
            digital_score: this.list[i].digital_score,
          });
        } else
        if (this.msg === '') {
          arr = this.list;
        }
      }
      return arr;
    },
  },
  methods: {
    addType() {
      this.dialogVisible = true;
      util.typeAllInfor().then((res) => {
        // console.log(res.data.data);
        this.options = res.data.data;
        util.allBrand().then((res) => {
          this.optionsTwo = res.data.data;
          // console.log(res.data.data);
        });
      });
    },
    //   添加数码品牌类别
    addDigitalType() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(this.optionsTwo);
        if (valid) {
          if (this.value === '') {
            alert('请选择数码名称');
          } else if (this.valueTwo === '') {
            alert('请选择品牌名称');
          } else if (this.value !== '' && this.valueTwo !== '') {
            for (let i = 0; i < this.options.length; i++) {
              if (this.value === this.options[i].digital_category_name) {
                this.id = this.options[i].digital_category_id;
                console.log('id', this.id);
              }
            }
            for (let i = 0; i < this.optionsTwo.length; i++) {
              console.log(this.optionsTwo[i]);
              if (this.valueTwo === this.optionsTwo[i].digital_brand_name) {
                this.idTwo = this.optionsTwo[i].digital_brand_id;
                console.log('idTwo', this.idTwo);
              }
            }
            util
              .inforAddInfor({
                digital_category_id: this.id,
                digital_brand_id: this.idTwo,
                digital_name: this.ruleForm.addName,
                digital_representation: this.ruleForm.addRepresentation,
                administrators_id: this.ruleForm.addAdministratorsId,
              })
              .then((res) => {
                console.log(res);
                util.allInfor().then((r) => {
                  console.log(r);
                  this.list = r.data.data;
                });
              });
            this.dialogVisible = false;
            this.ruleForm.addName = '';
            this.ruleForm.addRepresentation = '';
            this.ruleForm.addAdministratorsId = '';
            this.value = '';
            this.valueTwo = '';
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 编辑弹出框
    changeDigitalCategory(item, row) {
      console.log('item', item);
      console.log('row', row);
      this.changeValue = row.digital_category_name;
      this.changeValueTwo = row.digital_brand_name;
      this.ruleForm.changeName = row.digital_name;
      this.ruleForm.changeRepresentation = row.digital_representation;
      this.ruleForm.changeId = row.digital_id;
      this.changeDialogVisible = true;
      util.typeAllInfor().then((res) => {
        // console.log('change', res.data.data);
        this.changeOptions = res.data.data;
        util.allBrand().then((res) => {
          this.changeOptionsTwo = res.data.data;
          // console.log('changeTwo', res.data.data);
        });
      });
    },
    //编辑
    updateName() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          for (let i = 0; i < this.changeOptions.length; i++) {
            if (
              this.changeValue === this.changeOptions[i].digital_category_name
            ) {
              this.changeId = this.changeOptions[i].digital_category_id;
            console.log('id',this.changeId);
            }
          }
          for (let i = 0; i < this.changeOptionsTwo.length; i++) {
            console.log(this.changeValueTwo);
            if (
              this.changeValueTwo ===
              this.changeOptionsTwo[i].digital_brand_name
            ) {
              this.changeIdTwo = this.changeOptionsTwo[i].digital_brand_id;
            console.log('idT',this.changeIdTwo)
            }
          }
          axios
            .post('/api/digital/updDigitalMassage', {
              digital_id: this.ruleForm.changeId,
              digital_category_id: this.changeId,
              digital_brand_id: this.changeIdTwo,
              digital_name: this.ruleForm.changeName,
              digital_representation: this.ruleForm.changeRepresentation,
            })
            .then((r) => {
              util.allInfor().then((r) => {
                console.log(r);
                this.list = r.data.data;
              });
            });
          this.changeDialogVisible = false;
          this.ruleForm.changeName = '';
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除弹出框
    delDigitalCategory(item, row) {
      this.delDialogVisible = true;
      this.ruleForm.delId = row.digital_id;
      this.ruleForm.delName = row.digital_name;
      this.ruleForm.delRepresentation = row.digital_representation;
      console.log(row.digital_category_name);
      console.log(item);
    },
    //删除
    delName() {
      util
        .inforDelInfor({
          digital_id: this.ruleForm.delId,
        })
        .then((r) => {
          util.allInfor().then((r) => {
            console.log(r);
            this.list = r.data.data;
          });
        });
      this.delDialogVisible = false;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 400px;
  margin-bottom: 50px;
}
.el-card {
 margin: 0 auto;
  width: 1050px;
  margin-bottom: 50px;
}
.bnt1 {
  margin-left: 98px;
}
.addDigitalTypeName {
  width: 200px;
  margin-left: 40px;
}
.inputName {
  position: absolute;
  left: 63px;
  top: 25px;
}
.el-sel {
  margin-bottom: 20px;
}
.el-sel2 {
  margin-bottom: 20px;
  margin-left: 10px;
}
.name {
  margin-left: 40px;
  margin-right: 10px;
}
</style>